<template>
    <div class="upload-imagesList">
        <el-upload :action="uploadUrl" :on-change="handleChange" list-type="picture-card" :limit="1"
            :file-list="fileList" :on-success="(res, file) => handleAvatarSuccess(res, file, textType)"
            :before-upload="beforeAvatarUpload" :class="{ disabled: uploadDisabled }" :auto-upload="true">
            <i slot="default" class="el-icon-plus">
            </i>
            <div slot="file" slot-scope="{file}">
                <el-image class="el-upload-list__item-thumbnail" v-loading="loading" ref="elImage"
                    :preview-src-list="[file.url]" style="object-fit: cover;" :src="file.url" alt=""></el-image>
                <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                        <i class="el-icon-zoom-in"></i>
                    </span>
                    <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                        <i class="el-icon-delete"></i>
                    </span>
                </span>
            </div>
        </el-upload>
    </div>
</template>

<script>
import { uploadUrl, getHeader } from '@/utils/tool.js'
export default {
    props: {
        indexValue: {
            type: Number,
            default: 0,
        },
        imageList: {
            type: Array,
            default: () => [],
        },

        textType: {
            type: String,
            default: 'fahuo'
        }
    },
    data() {
        return {
            uploadUrl,
            getHeader,
            dialogImageUrl: '',
            dialogVisible: false,
            fileList: [
            ],
            uploadDisabled: false,
            loading: false,
        }
    },
    watch: {
        imageList: {//el-upload组件里面可能有什么和watch冲突了,最好不要用监听
            handler(newV, oldV) {
                if (JSON.stringify(newV) === JSON.stringify(oldV)) {
                    return;
                }
                let newVal = newV.filter((item) => {
                    return !!item
                })
                if (newVal.length) {//如果数组不为空就禁用添加组件
                    this.uploadDisabled = true;
                } else {//如果数组不为空就启用添加组件
                    this.uploadDisabled = false;
                }
                this.fileList = [];

                newVal.forEach((item, index) => {
                    const checkItem = this.fileList.find(
                        (subItem) => subItem.url === item
                    )
                    if (!checkItem) {
                        const fileItem = {
                            name: index,
                            url: item,
                        }
                        this.fileList.push(fileItem);
                    }
                })
            },
            immediate: true
        },
    },
    methods: {
        /*  放大*/
        handlePictureCardPreview(file) {
            this.$nextTick(() => {
                this.$refs.elImage.clickHandler()
            })
        },
        /* 下载 */
        handleDownload(file) {
            const checkItem = this.fileList.find((item) => item.uid === file.uid)
            this.download(checkItem.url)
        },
        /* 移除 */
        handleRemove(file) {
            this.$confirm('确定要删除该图片吗？', '系统提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                this.fileList.forEach((item, index) => {
                    if (item.name === file.name) {
                        this.fileList.splice(index, 1);
                        this.$nextTick(() => {
                            this.uploadDisabled = false;
                        })
                    }
                });
            }).catch(() => { });

        },
        /* 更改 */
        handleChange(file) {
            // console.log(file, "change");
            this.uploadDisabled = true;
            this.loading = !this.loading;
        },
        handleAvatarSuccess(res, file, type) {
            if (res.code == 200) {
                if (type == 'fahuo') {
                    this.fileList = [
                        {
                            name: type,
                            url: res.data.url
                        }
                    ]
                } else if (type == 'shouhuo') {
                    this.fileList = [
                        {
                            name: type,
                            url: res.data.url
                        }
                    ]
                } else if (type == 'xiehuo') {
                    this.fileList = [
                        {
                            name: type,
                            url: res.data.url
                        }
                    ]
                } else if (type == 'pay') {
                    this.fileList = [
                        {
                            name: type,
                            url: res.data.url
                        }
                    ]
                }

                this.$emit('getImageList', this.fileList, this.indexValue)
            }
        },
        beforeAvatarUpload(file) {
            return true;
            const isJPG = file.type === "image/jpeg";
            const isLt2M = file.size / 1024 / 1024 < 10;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 10MB!");
            }
            return isJPG && isLt2M;
        },
        /* 重置 */
        resetImageList() {
            this.fileList = []
        },
    },
}
</script>

<style lang="scss">
.upload-imagesList {
    width: 300px;
    overflow: hidden;

    .el-upload-list--picture-card .el-upload-list__item {
        width: 100% !important;
        height: 200px !important;

        &>div {
            width: 100% !important;
            height: 100% !important;

        }
    }

    .el-upload--picture-card {
        width: 100% !important;
        height: 200px !important;
        line-height: 200px !important;
    }

    .disabled .el-upload--picture-card {
        display: none !important;
    }
}


.el-upload-list__item {
    transition: none !important;
}
</style>